/**
 * 用户读者组
 */

import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-components';
import { Card, Button, Table } from 'antd';
import { connect } from 'umi';

const UserGroups = ({}) => {
  // 列表字段定义
  const columns = [
    {
      title: '读者组',
      dataIndex: 'a',
      key: 'a',
    },
    {
      title: '描述',
      dataIndex: 'b',
      key: 'b',
    },
    {
      title: '过期日期偏移（天）',
      dataIndex: 'c',
      key: 'c',
    },
    {
      title: '上次更新',
      dataIndex: 'd',
      key: 'd',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      width: 240,
      render: () => (
        <>
          <Button style={{ padding: '4px 6px' }} type="link">
            编辑
          </Button>
          <Button type="link" style={{ padding: '4px 6px' }}>
            删除
          </Button>
        </>
      ),
    },
  ];

  const dataArr = [
    {
      id: '1',
      a: '读者组1',
      b: '组1',
      c: '123',
      d: '2023/09/15',
    },
    {
      id: '2',
      a: '读者组2',
      b: '组2',
      c: '234',
      d: '2023/09/15',
    },
    {
      id: '3',
      a: '读者组3',
      b: '组3',
      c: '345',
      d: '2023/09/15',
    },
  ];

  // 切换页数
  const pageChange = async () => {};

  // 自定义面包屑
  const breadRoutes = {
    routes: [
      {
        path: '/settings',
        breadcrumbName: '设置',
      },
      {
        path: '/usergroups',
        breadcrumbName: '读者组',
      },
    ],
    itemRender: (route) => <span>{route.breadcrumbName}</span>,
    separator: '>',
  };

  return (
    <PageHeaderWrapper breadcrumb={breadRoutes}>
      <Card>
        <Table
          rowKey={(record) => record && record.id}
          size="small"
          columns={columns}
          dataSource={dataArr}
          onChange={pageChange}
          pagination={false}
        />
      </Card>
    </PageHeaderWrapper>
  );
};

export default connect(({}) => ({}))(UserGroups);
